<template>
    <h1 class="title">电冰箱测试系统</h1>
    <div style="padding-left: 10px;">
    <var-row>
        <var-col :span="12">
        <var-space align="center">
            <button class="button-func">
            <img class="icon" src="@\assets\icon-linechart.png"/>
            <br>
            曲线显示
            </button>
            <button class="button-func">
            <img class="icon" src="@\assets\icon-statistics.png"/>
            <br>
            统计值
            </button>
            <button class="button-func">
            <img class="icon" src="@\assets\icon-datalist.png"/>
            <br>
            数据列表
            </button>
            <button class="button-func">
            <img class="icon" src="@\assets\icon-historydata.png"/>
            <br>
            历史数据
            </button>
        </var-space>
        </var-col>
        
        <var-col :span="12">
            <var-space align="right">
                <div class="taiwei-nav">
                    <div class="taiwei-nav-title">台位导航</div>
                    <hr size=1 width="100%" align=left noshade>
                    <div class="taiwei-content">
                        <div style="font-size:1.4rem;">- 根节点</div>
                        <div style="font-size:1.2rem; text-indent:2em;"> - A室</div>
                        <div style="font-size:1.0rem; text-indent:4em;"> ·A1</div>

                        <div style="font-size:1.2rem; text-indent:2em;"> - B室</div>
                        <div style="font-size:1.0rem; text-indent:4em;"> ·B1</div>

                        <div style="font-size:1.2rem; text-indent:2em;"> + C室</div>
                    </div>
                </div>
                
            </var-space>
        </var-col>
    </var-row>
    </div>
</template>
<style>
    #app {
        text-align:center;
    }
    .title {
        text-align: left;
        padding-left: 10px; 
    }
    .icon {
        height:30px;
        width:30px;
    }
    .button-func {
        height:150px;
        width:150px;
        background-color: #fff;
        text-align: center;
        vertical-align:middle;
        color:black;
        font-size:1.5rem;
        border-radius:15px;
        padding-left: 10px;
    }
    .taiwei-nav {
        width:170px;
        height:620px;
        border:1px solid;
        margin-right:10px;
    }
    .taiwei-nav-title {
        font-size:1.5rem;
        text-align:left;
        padding-left: 10px;
    }
    .taiwei-content {
        text-align:left;
        padding-left:10px
    }
</style>